<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<title>表单页</title>
	
	<!-- 基本字典-->
	<script type="text/javascript" src="https://admin.mini-ease.com/upload/sys/dict.json"></script>

	<!-- momentjs -->
    <script type="text/javascript" src="/static/plugins/moment/moment-with-locales.js"></script>

	<!-- angularjs -->
    <script type="text/javascript" src="/static/plugins/angular/1.5.0/angular.min.js"></script>
	<!-- angular-moment-picker -->
	<link href="/static/plugins/angular/extends/angular-moment-picker/angular-moment-picker.min.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="/static/plugins/angular/extends/angular-moment-picker/angular-moment-picker.min.js"></script>
	
	<!-- bootstrap5 -->
	<link href="/static/plugins/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" media="all" />
	<script src="/static/plugins/bootstrap/5.1.3/js/bootstrap.min.js" charset="utf-8"></script>

	<!-- iconfont  -->
	<link rel="stylesheet" type="text/css" href="/static/plugins/h-ui/iconfont/1.0.8/iconfont.css" />
	<!-- alibaba iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />
	
	<!-- layui  -->
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- YS-UI -->
	<script th:inline="javascript">
	var dto = [[${dto}]];
	</script>
	<script type="text/javascript" src="/static/plugins/ysui/1.0.0/js/extends/YsForm.js"></script>
	<script type="text/javascript" src="/static/plugins/ysui/1.0.0/js/YsSubGrid.js"></script>
	<script type="text/javascript" src="/static/plugins/ysui/1.0.0/js/YsSubGridBtn.js"></script>
	<script type="text/javascript" th:src="${js}"></script>

	<style>
	.form-label-ys-form {width: 100px !important; white-space: nowrap; font-size: 14px; height: 30px; line-height: 30px; margin-bottom: 0px !important;}
	.form-control-ys-form {width: calc(100% - 100px); height: 30px; line-height: 30px; font-size: 14px;}
	.form-select-ys-form {width: calc(100% - 100px); height: 30px; line-height: 30px; padding-top: 0 !important;}
	.ml-2 {margin-left: 2px;}
	.font-red {color: red;}
	.btn-ys-form {margin: 0 5px;}
	
	.form-control[readonly] {background-color: #0087fa4d !important;}
	.form-check-input {font-size: 14px;}
	
	.ys-table-cell-editable {padding: 0 !important;}
	</style>

	<style>
	.form-label-ys-search {width: 100px !important; white-space: nowrap; font-size: 14px; height: 30px; line-height: 30px; margin-bottom: 0px !important;}
	.form-control-ys-search {width: calc(100% - 100px); height: 30px; line-height: 30px;}
	.form-select-ys-search {width: calc(100% - 100px); height: 30px; line-height: 30px; padding-top: 0 !important;}
	.ml-2 {margin-left: 2px;}
	
	.form-control-ys-in-sub-grid {width: 100%; height: 30px; line-height: 30px; font-size: 12px; border-color: orange !important;}
	.form-select-ys-in-sub-grid {width: 100%; height: 30px; line-height: 30px; font-size: 12px; padding: 0px 5px !important; border-color: orange !important;}
	</style>

<style>
table {border-collapse: collapse;}
.sticky-table {
	overflow: auto;
	width: 100%;
}

.sticky-table td, .sticky-table th {
    /* 设置td,th宽度高度 */
    border: 1px solid #c7d8ee;
    min-width: 50px;
    height: 30px;
    /*边框线，不会随着滑动变化而滑动 start*/
    outline-color: #c7d8ee;
    outline-style: solid;
    outline-width: 1px;
    /*边框线，不会随着滑动变化而滑动 start*/
}
.sticky-table th {
    position: sticky;
    top: 0; /* 首行永远固定在头部  */
    background-color: #eaf4ff; /*设置表头背景色*/
}

/*第一行 第一列*/
.sticky-table th:first-child{
    z-index: 888 !important;
    width: 50px !important;
}
.sticky-table th:first-child, .sticky-table td:first-child {
    position: sticky;
    left: 0; /* 首列永远固定在左侧 */
    z-index: 1;
    background-color: #eaf4ff;
    text-align: center;
}
</style>

<style>
.file-single {
	position: relative;
	display: inline-block;
	border-radius: 4px;
	padding: 0;
	overflow: hidden;
	color: #1E88C7;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
	border: 1px solid #FFFFFF;
}

.file-single input {
	cursor: pointer;
	position: absolute;
	font-size: 100px;
	left: 0;
	top: 0;
	opacity: 0;
	width: 92px;
	height: 92px;
}
 

.file-single:hover {
	background: #AADFFD;
	border-color: #78C3F3;
	color: #004974;
	text-decoration: none;
	border: 1px solid #99D3F5;
}
</style>
</head>
<body style="padding: 10px 0px;" ng-app="myApp" ng-controller="fromCtrl" ng-cloak>
<div ng-controller="formSelfCtrl">
	<header class="fixed-top" style="height: 48px;">
		<div class="container bg-light" style="max-width: 100% !important; padding: 5px 10px;">
			<div class="row">
				<div class="col-sm-12 col-sm-12 col-md-12">
					<button type="button" class="btn btn-primary btn-ys-form" ng-if="saveBtn.state == 1" ng-click="doSave()"><i class="Hui-iconfont">&#xe632;</i>保存</button>
					<button type="button" class="btn btn-success btn-ys-form" ng-if="flowPassBtn.state == 1" ng-click="doFlowPass()"><i class="Hui-iconfont">&#xe6e1;</i>流转</button>
					<button type="button" class="btn btn-warning btn-ys-form" ng-if="flowRefuseBtn.state == 1" ng-click="doFlowRefuse()"><i class="iconfont icon-left-circle-fill"></i>退回</button>
					<button type="button" class="btn btn-warning btn-ys-form" ng-if="flowInitBtn.state == 1" ng-click="doFlowInit()"><i class="Hui-iconfont">&#xe6dd;</i>驳回</button>
					<button type="button" class="btn btn-outline-dark btn-ys-form" ng-if="flowLogBtn.state == 1" ng-click="doFlowLog()"><i class="Hui-iconfont">&#xe61e;</i>流程跟踪</button>
					<button type="button" class="btn btn-danger btn-ys-form" ng-if="deleteBtn.state == 1" ng-click="doDelete()"><i class="Hui-iconfont">&#xe609;</i>删除</button>
				</div>
			</div>
		</div>
	</header>
	<div class="container" style="max-width: 100% !important; margin-top: 48px; margin-bottom: 40px;">
		<div style="margin-top: 10px;">
			<form action="">
				<div class="row">
					<input type="hidden" ng-repeat="row in rows" ng-if="row.formHidden == 1" name="{{row.code}}" ng-model="valueMap[row.code]" ng-required="row.required == 1" />
					<div class="col-sm-12 col-sm-6 mb-2" ng-repeat="row in rows" ng-if="row.formHidden != 1" ng-class="{'col-md-4': row.formLength == 1, 'col-md-8': row.formLength == 2, 'col-md-12': row.formLength == 3}">
						<!-- 输入框 -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_text'">
							<label class="form-label form-label-ys-form" title="{{row.name}}"><span class="font-red" ng-if="row.required == 1">*</span>{{row.name}}：</label>
							<input type="text" class="form-control form-control-ys-form" name="{{row.code}}" placeholder="{{row.tip}}" ng-model="valueMap[row.code]" ng-required="row.required == 1" ng-readonly="row.stateReadonly" ng-change="changeValueMap(row.code)" ng-click="doClickOnItem(row.code)">
						</div>
						<!-- 输入框(数字) -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_number'">
							<label class="form-label form-label-ys-form" title="{{row.name}}"><span class="font-red" ng-if="row.required == 1">*</span>{{row.name}}：</label>
							<input type="text" class="form-control form-control-ys-form" name="{{row.code}}" ng-model="valueMap[row.code]" ng-required="row.required == 1" ng-readonly="row.stateReadonly" ng-change="changeValueMap(row.code)">
						</div>
						<!-- 下拉框 -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_dropdown'">
							<label class="form-label form-label-ys-form" title="{{row.name}}">{{row.name}}：</label>
							<select class="form-select form-select-sm form-select-ys-form" ng-options="item.value as item.name for item in MAP_DICT[row.dictKey]" ng-model="valueMap[row.code]" name="{{row.code}}" ng-readonly="row.stateReadonly">
							</select>
						</div>
						<!-- 转换框 -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_checkbox'">
							<label class="form-label form-label-ys-form" title="{{row.name}}">{{row.name}}：</label>
							<div class="form-switch" style="position: relative;">
								<input class="form-check-input" type="checkbox" style="z-index: 1" readonly ng-show="valueMap[row.code] == 0">
								<input class="form-check-input" type="checkbox" style="z-index: 1" checked readonly ng-show="valueMap[row.code] == 1">
								<div style="cursor: pointer; position: absolute; font-size: 100px; left: 0; top: 0; opacity: 0; width: 100%; height: 24px; z-index: 99;" ng-click="changeValueMapOfSwitch(row.code);"></div>
							</div>
						</div>
						<!-- 单选框 -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_radio'">
							<label class="form-label form-label-ys-form" title="{{row.name}}">{{row.name}}：</label>
							<div class="d-inline-flex">
								<div class="form-check" ng-repeat="item in MAP_DICT[row.dictKey]" style="margin-right: 10px;" ng-click="valueMap[row.code] = item.value">
									<input type="radio" class="form-check-input" name="{{row.code}}" ng-value="valueMap[row.code]" ng-checked="valueMap[row.code] == item.value">{{item.name}}
									<label class="form-check-label" for="radio1"></label>
								</div>
							</div>
						</div>
						<!-- 单选弹出框 -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_buttontext'">
							<label class="form-label form-label-ys-form" title="{{row.name}}"><span class="font-red" ng-if="row.required == 1">*</span>{{row.name}}：</label>
							<input type="text" class="form-control form-control-ys-form" name="singleSelect" autocomplete="off" ng-model="valueMap[row.code]" ng-click="showModalRadio(row.modalKey, 1, row.code)" readonly>
						</div>
						<!-- 单文件上传 -->
						<div class="d-inline-flex align-items-center" ng-if="row.type == 't_file'">
							<label class="form-label form-label-ys-form" title="{{row.name}}">{{row.name}}：</label>
							<div class="file-single">
								<input type="file" nv-file-select uploader="uploaderSingleFile" options="{ ysfield: '{{row.code}}' }" />
								<img style="width: 92px;height: 92px;margin: 0;" src="/static/img/img_add.jpg" ng-if="valueMap[row.code] == '' || valueMap[row.code] == null">
								<img style="width: 92px;height: 92px;margin: 0;" src="/static/img/img_file.jpg" ng-if="valueMap[row.code] != null && valueMap[row.code].length > 0">
							</div>
							<i class="Hui-iconfont" style="cursor: pointer; color: blue;" title="查看原图" ng-click="showOriginFile(valueMap[row.code])" ng-if="valueMap[row.code] != null && valueMap[row.code].length > 0">&#xe665;</i>
						</div>
						<!-- 单图上传 -->
						<div class="d-inline-flex align-items-center" ng-if="row.type == 't_file2'">
							<label class="form-label form-label-ys-form" title="{{row.name}}">{{row.name}}：</label>
							<div class="file-single">
								<input type="file" accept="image/*" nv-file-select uploader="uploaderImg" options="{ ysfield: '{{row.code}}' }" />
								<img style="width: 92px;height: 92px;margin: 0;" src="/static/img/img_add.jpg" ng-if="valueMap[row.code] == '' || valueMap[row.code] == null">
								<img style="width: 92px;height: 92px;margin: 0;" ng-src="{{valueMap[row.code]}}" ng-if="valueMap[row.code] != null && valueMap[row.code].length > 0">
							</div>
							<i class="Hui-iconfont" style="cursor: pointer; color: blue;" title="查看原图" ng-click="showOriginImg(valueMap[row.code])" ng-if="valueMap[row.code] != null && valueMap[row.code].length > 0">&#xe665;</i>
						</div>
						<!-- 多文件上传 -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_file_multy'">
							<label class="form-label form-label-ys-form" title="{{row.name}}"><span class="font-red" ng-if="row.required == 1">*</span>{{row.name}}：</label>
							<input type="text" class="form-control form-control-ys-form" name="{{row.code}}" ng-model="valueMap[row.code]" ng-required="row.required == 1" ng-click="showModalMulty(row.multyFileSourceId, row.multyFileSourceType, row.code)" ng-readonly="row.stateReadonly">
						</div>
						<!-- 日期框YYYY-MM-DD -->
						<div class="d-inline-flex align-items-center" style="width: 100%;" ng-if="row.type == 't_date'">
							<label class="form-label form-label-ys-form" title="{{row.name}}"><span class="font-red" ng-if="row.required == 1">*</span>{{row.name}}：</label>
							<input class="form-control form-control-ys-form" type="text"
								moment-picker="valueMap[row.code]" format="YYYY-MM-DD" start-view="day"
								ng-value="valueMap[row.code]" change="changeValueMap(row.code)"/>
						</div>
						
						<!-- 验证提示 -->
						<div style="width: 100%; height: 12px; font-size: 12px; color: red; padding-left: 100px;" ng-if="row.required == 1" ng-show="form.checked == true && (valueMap[row.code] == null || valueMap[row.code] == undefined || valueMap[row.code] === '')">
							{{row.name}}不能为空
						</div>
					</div>
				</div>
				
				<div ng-controller="btnCtrl" ng-if="hasSubGrid">
					<div style="margin: 15px 0 5px 0;">
						<button type="button" class="btn btn-outline-success btn-sm" ng-repeat="button in subGrid.buttonArr" ng-click="bindBtn(button.event)"><i class="Hui-iconfont">&#xe6e2;</i>{{button.name}}</button>
					</div>
					<div class="table-responsive-sm table-responsive-md table-responsive-lg table-responsive-xl sticky-table" style="overflow: auto; max-height: 50vh; height: 50vh;" ng-if="hasSubGrid" ng-controller="subGridCtrl">
						
						<table class="table table-border table-bordered table-sm table-hover table-sort table-responsive table-nowrap" style="font-size: 12px; white-space: nowrap;table-layout: fixed;">
							<thead>
								<tr class="table-primary" style="text-align: center;">
									<th width="25"><input type="checkbox" name="ys_form_sonlist_checkbox_all" ng-model="subGrid.ys_form_sonlist_checkbox_all" ng-checked="subGrid.ys_form_sonlist_checkbox_all == true" ng-click="subGrid.checkAllSubGrid()"></th>
									<th style="width: {{col.width}}px !important;" ng-repeat="col in subGrid.colGridArr" ng-if="col.hide == false">{{col.title}}</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="row in subGrid.sonlist track by $index" ng-init="row.index = $index">
									<td><input type="checkbox" ng-model="row.ys_form_sonlist_checkbox" ng-checked="row.ys_form_sonlist_checkbox == true"></td>
									<td style="text-overflow: ellipsis;overflow: hidden; width: {{col.width}}px !important;" ng-repeat="col in subGrid.colGridArr" ng-class="{'ys-table-cell-editable': col.stateEdit == 1}" ng-if="col.hide == false" ng-click="subGrid.cellClick(row, col.field)">
										<div ng-if="col.stateEdit == 1">
											<input type="text" class="form-control form-control-ys-in-sub-grid" ng-if="col.type == 't_text'" ng-model="row[col.field]" ng-change="subGrid.textChange(row, col.field)">
											<input type="text" class="form-control form-control-ys-in-sub-grid" ng-if="col.type == 't_number'" ng-model="row[col.field]" ng-change="subGrid.numberChange(row, col.field)">
											<select class="form-select form-select-sm form-select-ys-in-sub-grid" ng-if="col.type == 't_dropdown'" ng-options="item.value as item.name for item in MAP_DICT[col.dictKeyBase]" ng-model="row[col.field]">
											</select>
											<input type="text" class="form-control form-control-ys-in-sub-grid" readonly ng-if="col.type == 't_buttontext'" ng-model="row[col.field]" ng-click="showModalRadio(col.modalKey, 2, col.field, row.index)">
											<div ng-if="col.type == 't_date'">
												<input class="form-control form-control-ys-in-sub-grid"
													moment-picker="row[col.field]" format="YYYY-MM-DD" start-view="day"
													ng-value="row[col.field]" type="text"/>
											</div>
											<div ng-if="col.type == 't_month'">
												<input class="form-control form-control-ys-in-sub-grid"
													moment-picker="row[col.field]" format="YYYY-MM" start-view="month"
													ng-value="row[col.field]" type="text"/>
											</div>
											<input type="text" class="form-control form-control-ys-in-sub-grid" ng-if="col.type == 't_file_multy' && row.id > 0" ng-model="row[col.field]" ng-click="showModalMulty(row.id, col.multyFileSourceType, col.field)">
											
											<input type="text" class="form-control form-control-ys-in-sub-grid" ng-if="col.type == 't_buttontext_multy'" ng-model="row[col.field]" ng-click="showModalCheckBoxSelf(row, col.field)">
											
										</div>
										<div ng-if="col.stateEdit == 0">
											<span ng-if="col.type == 't_text'" title="{{row[col.field]}}">{{row[col.field]}}</span>
											<span ng-if="col.type == 't_number'" title="{{row[col.field]}}">{{row[col.field]}}</span>
											<span ng-if="col.type == 't_dropdown'">
												<div ng-repeat="item in MAP_DICT[col.dictKeyBase]" ng-if="item.value == row[col.field]">
													{{item.name}}
												</div>
											</span>
											<span ng-if="col.type == 't_date'" title="{{row[col.field]}}">{{row[col.field]}}</span>
											<span ng-if="col.type == 't_month'" title="{{row[col.field]}}">{{row[col.field]}}</span>
										</div>
										<div class="form-switch" style="padding: 5px 0; text-align: center;" ng-if="col.type == 't_checkbox'">
											<input class="form-check-input" type="checkbox" ng-checked="row[col.field] == 1" ng-click="row[col.field] = (row[col.field] == 0 ? 1 : 0);" ng-disabled="col.stateEdit == 0">
										</div>
										<span style="padding: 0;" ng-if="col.type == 't_self_define_tpl'" ng-init="path = 'templet_script_' + col.id" ng-include="path">
										</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<footer class="fixed-bottom" style="height: 40px;">
		<div class="container bg-light" style="max-width: 100% !important; padding: 5px 10px;">
			<div class="row">
				<div class="col-sm-12 col-sm-6 col-md-3">
					<div class="d-inline-flex align-items-center" style="width: 100%;">
						<label class="form-label form-label-ys-form">流程状态：</label>
						<input type="text" class="form-control form-control-ys-form" style="font-size: 14px;" ng-value="footer.stateFlowName" readonly>
					</div>
				</div>
				<div class="col-sm-12 col-sm-6 col-md-3">
					<div class="d-inline-flex align-items-center" style="width: 100%;">
						<label class="form-label form-label-ys-form">制单人工号：</label>
						<input type="text" class="form-control form-control-ys-form" style="font-size: 14px;" ng-value="footer.createUserId" readonly>
					</div>
				</div>
				<div class="col-sm-12 col-sm-6 col-md-3">
					<div class="d-inline-flex align-items-center" style="width: 100%;">
						<label class="form-label form-label-ys-form">制单人部门：</label>
						<input type="text" class="form-control form-control-ys-form" style="font-size: 14px;" ng-value="footer.createDeptId" readonly>
					</div>
				</div>
				<div class="col-sm-12 col-sm-6 col-md-3">
					<div class="d-inline-flex align-items-center" style="width: 100%;">
						<label class="form-label form-label-ys-form">制单人岗位：</label>
						<input type="text" class="form-control form-control-ys-form" style="font-size: 14px;" ng-value="footer.createRoleName" readonly>
					</div>
				</div>
			</div>
		</div>
	</footer>
	
	<!-- YS弹出框控件，必须在父控件包裹范围内 -->
	<th:block th:include="include/src :: YsModal"/>
	<!-- YS弹出框（页面）控件，必须在父控件包裹范围内 -->
	<th:block th:include="include/src :: YsModalLink"/>
	<!-- 子列表字段自定义控件 -->
	<th:block th:include="include/subgrid-self-def :: SelfDefTemplet"/>
</div>
</body>
</html>
